<template>
  <a-card class="user-info" :loading="loading">
    <div style="display: flex; align-items: center;">
      <a-avatar :size="80" :src="avatarSrc" />
      <div class="user-details" style="margin-left: 20px;">
        <h3 style="font-size: 24px; margin: 0;">{{ name }}</h3>
        <p style="font-size: 16px; margin: 8px 0;">{{ title }}</p>
        <p style="font-size: 14px; margin: 0;">"{{ motto }}"</p>
      </div>
    </div>
  </a-card>
</template>

<script>
import axios from 'axios';

export default {
  name: "UserInfo",
  props: {
    name: { type: String, default: "王靖" },
    title: { type: String, default: "信息管理与信息系统1班" },
    motto: { type: String, default: "此刻是不会再拥有此刻了。" },
    avatarSrc: { type: String, default: "/public/烟绯.jpg" }
  },
  data() {
    return {
      fetchedData: null,
    };
  },
  created() {
    this.fetchUserData();
  },
  methods: {
    async fetchUserData() {
      try {
        const response = await axios.get('/api/user-info');
        this.fetchedData = response.data;
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    }
  }
};
</script>

<style scoped>
.user-info {
  display: flex;
  align-items: center;
  padding: 16px;
}
.user-details {
  margin-left: 16px;
}
</style>

